<template>
  <div style="padding: 30px">
    <div style="margin-bottom: 20px">
      <n-button type='info' @click="initData">
        <template #icon>
          <n-icon style="vertical-align: bottom">
            <md-refresh/>
          </n-icon>
        </template>
        {{ $t("common.refresh") }}
      </n-button>
    </div>

    <div>
      <el-table  :data="tableData" border cell-style="text-align:center" header-cell-style="text-align:center">
        <el-table-column :label="t('producer.address')">
          <template #default="scope">
            <n-tag type="warning">{{ scope.row.localAddress }}</n-tag>
          </template>
        </el-table-column>
        <el-table-column :label="t('producer.createTime')">
          <template #default="scope">
            <n-time :time="scope.row.createTime" style="margin-right: 10px"/>
            <n-tag type="info">
              <n-time :to="new Date()" :time="scope.row.createTime" type="redirect"/>
            </n-tag>
          </template>
        </el-table-column>
        <el-table-column :label="t('producer.status')">
          <template #default="scope">
            <n-tag type="success">{{t("producer.normal")}}</n-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, h} from 'vue'
import {useI18n} from "vue-i18n"
import {ProducerCtx} from '../../../service/devil/type'
import {findProducerCtxRequest} from "../../../service/devil/devil";
import {MdRefresh} from '@vicons/ionicons4'

export default defineComponent({
  name: "Producer",
  components: {
    MdRefresh
  },
  setup() {
    const {t} = useI18n()
    let tableData = ref<ProducerCtx[]>()

    async function initData() {
      tableData.value = await findProducerCtxRequest()
    }

    initData()

    return {
      t,
      tableData,
      initData
    }
  }
})
</script>

<style scoped>

</style>
